<template>
    <view>
        <view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
            <view class="cu-bar fixed"
                  :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor,isUnderline&&!isHideNavigation?'azm-1px-b':'']"
                  :style="[style]">
                <block v-if="!isHideNavigation">
                    <!--#ifndef MP-WEIXIN-->
                    <view class="action" @tap="BackPage" v-if="isBack">
                        <text class="cuIcon cuIcon-back"></text>
                        <slot name="backText"></slot>
                    </view>
                    <!--#endif-->
                    <!--#ifdef MP-WEIXIN-->
                    <block v-if="isCustom && isBack">
                        <view class="action border-custom" :style="CustomStyle">
                            <text @tap="BackPage" class="cuIcon cuIcon-back"></text>
                            <text class="cuIcon cuIcon-homefill" @tap="toHome"></text>
                        </view>
                    </block>
                    <block v-else-if="isBack">
                        <view class="action" @tap="BackPage">
                            <text class="cuIcon cuIcon-back"></text>
                            <slot name="backText"></slot>
                        </view>
                    </block>
                    <!--#endif-->
                    <view class="content" :style="[{top:StatusBar + 'px'}]">
                        <slot name="content"></slot>
                    </view>
                    <slot name="right"></slot>
                </block>
                <view class="azm-status-bar" v-if="!hideStatusBar && StatusBar>0"
                      :style="[{height:StatusBar + 'px',backgroundColor:StatusBarBgColor}]"></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            const app = getApp();
            return {
                StatusBar: this.StatusBar,
                CustomBar: this.CustomBar,
                CustomBarBom: this.CustomBar,
                HideNavigation: this.HideNavigation,
                //#ifdef MP-WEIXIN
                Custom: this.Custom,
                //#endif
                pageLen: 0
            };
        },
        name: 'cu-custom',
        computed: {
            style () {
                const jude = this.$util.jude;
                const CustomBar = this.CustomBar;
                const StatusBar = this.StatusBar;
                const bgImage = this.bgImage;
                let bgColorStyle = this.bgColorStyle;
                if (!jude.isEmpty(bgColorStyle) && jude.isObject(bgColorStyle)) {
                } else {
                    bgColorStyle = {}
                }
                let style = {
                    height: CustomBar + 'px',
                    paddingTop: StatusBar + 'px',
                    ...bgColorStyle
                };
                if (bgImage) {
                    style.backgroundImage = `url(${bgImage})`
                }
                for (let key in style) {
                    if (/[A-Z]/g.test(key)) {
                        let newKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
                        style[newKey] = style[key];
                        delete style[key]
                    }
                }
                return style
            },
            //#ifdef MP-WEIXIN
            CustomStyle () {
                const Custom = this.Custom;
                return `width:${Custom.width}px;height:${Custom.height}px;margin-left:calc(750rpx - ${Custom.right}px)`
            },
            //#endif
            isHideNavigation () {
                let HideNavigation = this.HideNavigation;
                let hideNavigation = this.hideNavigation;
                let hideStatusBar = this.hideStatusBar;
                switch (true) {
                    case HideNavigation === true && hideNavigation === false:
                        return false;
                    case  hideNavigation === true || HideNavigation === true:
                        if (hideStatusBar === true) {
                            this.StatusBar = 0;
                        }
                        this.CustomBar = this.StatusBar;
                        return true;
                    default:
                        return false;
                }
            }
        },
        props: {
            bgColor: {
                type: String,
                default: ''
            },
            isBack: {
                type: [Boolean, String],
                default: false
            },
            isUnderline: Boolean,
            isCustom: {
                type: [Boolean, String],
                default: false
            },
            bgImage: {
                type: String,
                default: ''
            },
            bgColorStyle: {
                type: Object,
                default: function (data) {
                    return data || {}
                }
            },
            StatusBarBgColor: String,
            hideNavigation: [Boolean, String],
            hideStatusBar: [Boolean, String],
        },
        methods: {
            BackPage () {
                this.$emit('backing-out')
            },
            toHome () {
                this.$emit('to-home')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .azm-status-bar {
        position: absolute;
        background: #fff;
        width: 100%;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }
</style>
